<template>
	<z-paging ref="paging" v-model="list" @query="getList">
		<view class="d-p-l-30 d-p-r-30 content">
			<view class="d-flex d-m-t-20" v-for="(item, index) in list" :key="index"
				@click="detail(item.id, item.court_name)" style="box-shadow: 0px 6px 28px 0px rgb(8 73 162 / 11%);
    background: #fff;
    border-radius: 5px;
    padding: 10px;">
				<u-image :src="item.show_picture" width="154rpx" height="154rpx" radius="6rpx"></u-image>
				<view class="d-m-l-20 d-flex-1">
					<view class="d-font-28">{{ item.court_name }}</view>
					<!-- <view class="tags d-flex d-flex-wrap"><view class="tag">标签</view></view> -->
					<!-- <view class="price d-m-t-20">
						<text class="d-font-24 bold">¥</text>
						<text class="d-font-36 bold">{{ item.min_price }}</text>
						<text class="d-font-24">起</text>
					</view> -->
				</view>
				<view>
					<u-button type="primary" :customStyle="{
							height: '60rpx'
						}">
						<view>去预约</view>
					</u-button>
				</view>
			</view>
		</view>
		<u-popup @touchmove.stop :show="consultant" @close="closeAmount2" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">
			<!-- <view class="store-popup"> -->
			<view class="store-popup">
				<view class="title flex-between">
					<text>支付人员</text>
					<u-icon @click="closetant" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<scroll-view class="scroll-view_H" scroll-y="true" :scroll-top="scrollTop">
					<view>
						<radio-group active-color="#59A0FF" size="40rpx" placement="column" @change='change2'>
							<label class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-for="(item,index) in List_pay"
								:key="index">
								<!-- <u-image :src="item.member_photo" width="40rpx" height="40rpx"></u-image> -->
								<u-avatar size="60rpx" :src="item.member_photo"></u-avatar>
								<view class="d-m-l-20 d-flex-1 d-font-28">{{item.member_name}}</view>
								<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false"
									style="transform:scale(0.8)" />
							</label>
						</radio-group>
					</view>
				</scroll-view>
				<u-button type="primary" shape="circle" :custom-style="{
							height: '80rpx',
							width: '80vw',
							fontSize: '30rpx',
							background: '#59A0FF',
							marginBottom:'6vh'
						}" @click="okSubmit">
					确定
				</u-button>
			</view>

			<!-- </view> -->
		</u-popup>
	</z-paging>
</template>

<script>
	import {
		court,
		mList,
		getMember
	} from '@/common/api';
	export default {
		data() {
			return {
				list: [],
				consultant: false,
				List_pay: [],
				payChoose: {},
				member_type: '',
				Listpay: {
					member_name: '自己',
					member_phone: '',
					member_id: ''
				},
				court_name: '',
				id: '',
				scrollTop:0,
				memberlist: {},

			};
		},
		methods: {
			async getList(page, limit) {
				court({
						page,
						limit
					})
					.then(res => {
						this.$refs.paging.complete(res.data);
					})
					.catch(err => {
						this.$refs.paging.complete(false);
					});

				getMember()
					.then(res => {
						this.memberlist = res
					})
			},
			detail(id, court_name) {
				this.id = id
				this.court_name = court_name
				if (this.memberlist.type > 1) {
					this.consultant = true;
					this.familyData()
				} else {
					uni.$u.route({
						url: '/pages/index/detail',
						params: {
							id: this.id,
							court_name: this.court_name,
						}
					});
				}

			},
			familyData() {
				mList()
					.then(res => {
						res.unshift(this.Listpay);
						console.log(res, '6666'); // 输出结果
						this.List_pay = res;
					})
			},
			okSubmit() {
				this.consultant = false;

				let pay_id = this.List_pay[0].member_id
				this.payChoose = this.List_pay[0]
				for (let i = 0; i < this.List_pay.length; i++) {
					if (this.List_pay[i].checked) {
						pay_id = this.List_pay[i].member_id
						this.payChoose = this.List_pay[i]
						break
					}
				}
				uni.$u.route({
					url: '/pages/index/detail',
					params: {
						id: this.id,
						court_name: this.court_name,
						member_id: this.payChoose.member_id,
						member_type: this.payChoose.member_type,
					}
				});
				console.log(this.payChoose, '【【【【')
			},
			closeAmount2() {
				this.consultant = false;
			},
			closetant() {
				this.consultant = false
				this.list_items = []
				this.xiaoshou = true
			},

			change2(e) {
				let that = this
				let i = e.detail.value
				const item = this.List_pay[i]
				if (item) {
					this.payChoose = item
					this.List_pay[i].checked = true
				} else {
					this.payChoose = {}
				}
			},
		}
	};
</script>

<style lang="scss">
	.content {
		color: #333;

		.tags {
			margin-top: 10rpx;

			.tag {
				font-size: 24rpx;
				color: #fff;
				background-color: #2b2e4d;
				padding: 2rpx 8rpx;
				border-radius: 4rpx;
				margin-right: 10rpx;
			}
		}

		.price {
			color: #ff4105;

			.bold {
				font-weight: bold;
			}
		}

	}

	.store-popup {
		padding: 20rpx 0;

		.title {
			padding: 0px 30rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #cccccc;
			font-weight: bold;

			.clo {
				color: #2f75fa;
			}
		}

		.scroll-view_H {
			height: 40vh;
			overflow: auto;
			padding-bottom: 30rpx;
		}


		.btn {
			padding: 0px 30rpx;
			margin-top: 20rpx;
		}
	}
</style>